<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>亲子莜面体验营</title>
    <link href="/static/resource/album/css/reset.css" rel="stylesheet" />
    <link href="/static/resource/album/css/model.css" rel="stylesheet" />
    <script src="/static/resource/album/js/jquery.min.js"></script>
    <script src="/static/resource/album/js/rem.min.js"></script>
    <link  href="/static/resource/css/cropper.css" rel="stylesheet">
    <link  href="http://static.zhenxuan.xibei.com.cn/public/static/home/js/layer_mobile/need/layer.css?2.0" rel="stylesheet">
    <script src="/static/resource/album/js/cropper.js"></script>
    <script src="http://static.zhenxuan.xibei.com.cn/public/static/home/js/layer_mobile/layer.js"></script>
</head>
<body>
<style>
    .btn-group{
        width: 100%;
        height: 1rem;
        z-index: 100;
        position: fixed;
        bottom: 0;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .photo-box{
        background: url("{$album_img_url}") no-repeat;
        background-size: 100%;
    }
</style>
 <div class="mask">
     <img id="image" src="{$img_url}">
 </div>
<div class="btn-group">
    <input type="button" value="重选照片" class="btn-again" id="select" />
    <div class="btn-sure" id="commit" style="z-index: 9999;">确定</div>
</div>
<img src="{$album_img_url}" style="display:none;" id="myimg">
<!--<img src="/static/resource/album/bg.png" style="display:none;width: 100%;height: 100%;" id="myimg">-->

<input type="text" value="{$id}" style="display: none;" id="huodong">
<script>
   function getRoundedCanvas(sourceCanvas) {
        var myimg = $('#myimg').attr('src');
        var img = new Image();
        img.src = myimg;
       img.onload = function () {
           var canvas = document.createElement('canvas');
           var context = canvas.getContext('2d');
           var width = sourceCanvas.width;
           var height = sourceCanvas.height;
           var mywidth = width * 1.2;
           var myheight = height * 1.27;
           var cx = width * 0.12;
           var cy = height * 0.13;
           canvas.width = mywidth;
           canvas.height = myheight;
           context.drawImage(sourceCanvas, cx, cy, width, height);
//           context.drawImage(img, 0, 0, mywidth, myheight);
           dataurl = canvas.toDataURL('image/png');
           fromData(dataurl);
       }
    }
    //重新选择
   $('#select').click(function(){
       var id = $('#huodong').val()
       location.href='imgchoice?id='+id;
   })

    //确定裁剪
    $("#commit").on("click",function(){
        alert('正在裁剪请耐心等待.....');
        $image = $('#image');
         croppedCanvas = $image.cropper('getCroppedCanvas');
        console.log(croppedCanvas);
          getRoundedCanvas(croppedCanvas);
    })
   function fromData(base64){
       $.ajax({
           type:"POST",
           url:"{:url('index')}",
           data:{base64:base64},
           dataType:"json",
           success:function (msg) {
               if(msg.code == 1){
                   window.location.href = "imgshow?i="+msg.i;
               }
           }
       })
   }

    //初始化  可以给#image元素一张默认图片 就可以直接看效果
    $('#image').cropper({  //这里是给img 即被裁剪的图片进行参数配置
            aspectRatio: 4/3,//裁剪框的比例
            guides:false,   //裁剪框内虚线
            background:false,
            movable:false,
            resizable:false,
            dragCrop: false,
            cropBoxMovable:false,
            cropBoxResizable:false,
            toggleDragModeOnDblclick:false,
           crop: function(data) {
               //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
               $('#x').val(data.x);
               $('#y').val(data.y);
               console.log(data)
               //console.log('w'+data.width+'   height'+data.height);
           },
        built:function(){
            $('.cropper-crop-box').append("<style>.cropper-crop-box::after{display:none}</style>")
            $(".cropper-crop-box").append("<div class='photo-box' style='top:55px;left:-33px'></div>")
        }
        });

</script>
</body>
</html>